<template>
	<div>
		<div class="commonPop" :class="show ? 'show' : ''" @click="close"></div>
		<div class="commonMain" :class="show ? 'show' : ''" @click.stop>
			<img src="/img/purchaseAreaTotalBg.png" class="purchaseAreaTotalBg" />
			<div @click="close" class="close iconfont icon-yuyinguanbi"></div>
			<div class="vipMain flex">
				<div class="left flex">
					<div class="userFlex flex">
						<img src="https://api.sora13.com/download/20240613/avatar666b01e160115768989.png" class="avatar" />
						<div class="info">
							<div class="nick ell">请先登录</div>
							<div class="desc ell">开通会员后享受超多权益</div>
						</div>
						<div class="btn">联系客服</div>
					</div>
					<div class="vipCenter flex">
						<div class="heads flex">
							<span>开通会员</span>
							<img src="/img/icon-wxVipChecked.png" />
						</div>
						<div class="vipScroll">
							<div class="packageGroup flex">
								<div class="item flex active">
									<div class="notice">限时特惠</div>
									<div class="vH3">包夜套餐</div>
									<div class="vPrice flex">
										<span class="unit">￥</span>
										<span class="num">29.9</span>
									</div>
									<div class="vOldPrice">￥29.9</div>
								</div>
								<div class="item flex">
									<div class="vH3">包月套餐</div>
									<div class="vPrice flex">
										<span class="unit">￥</span>
										<span class="num">49.9</span>
									</div>
									<div class="vOldPrice">￥59.9</div>
								</div>
								<div class="item flex">
									<div class="vH3">包年套餐</div>
									<div class="vPrice flex">
										<span class="unit">￥</span>
										<span class="num">188</span>
									</div>
									<div class="vOldPrice">￥288</div>
								</div>
								<div class="item flex">
									<div class="vH3">终身会员</div>
									<div class="vPrice flex">
										<span class="unit">￥</span>
										<span class="num">388</span>
									</div>
									<div class="vOldPrice">￥588</div>
								</div>
							</div>
							<div class="vipH3 flex">
								<div class="one">会员尊享 最新模型</div>
								<div class="two">后续持续更新，已开通会员的客户免费升级</div>
							</div>
							<div class="vipTable">
								<div class="column flex">
									<div class="item" style="color: #05073b;font-weight: bold;font-size: 14px;">权益对比</div>
									<div class="item" style="font-weight: bold;font-size: 14px;">会员<img src="/img/vip-icon-in-feature.png" /></div>
									<div class="item" style="font-weight: bold;font-size: 14px;">非会员</div>
								</div>
								<div class="column flex">
									<div class="item">歌词创作</div>
									<div class="item iconfont icon-zhengque" style="font-size: 15px;"></div>
									<div class="item iconfont icon-guanbicuowu" style="font-size: 17px;"></div>
								</div>
								<div class="column flex">
									<div class="item">歌曲生成</div>
									<div class="item iconfont icon-zhengque" style="font-size: 15px;"></div>
									<div class="item iconfont icon-guanbicuowu" style="font-size: 17px;"></div>
								</div>
								<div class="column flex">
									<div class="item">纯音乐</div>
									<div class="item iconfont icon-zhengque" style="font-size: 15px;"></div>
									<div class="item iconfont icon-guanbicuowu" style="font-size: 17px;"></div>
								</div>
								<div class="column flex">
									<div class="item">次数</div>
									<div class="item">每日10次，1次2首</div>
									<div class="item iconfont icon-guanbicuowu" style="font-size: 17px;"></div>
								</div>
								<div class="column flex">
									<div class="item">在线客服</div>
									<div class="item">极速接入</div>
									<div class="item">排队等候</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right flex">
					<div class="payGroup flex">
						<div class="item flex active">
							<img src="/img/alipay.png" />
							<span>支付宝</span>
						</div>
						<div class="item flex">
							<img src="/img/wepay.png" />
							<span>微信</span>
						</div>
					</div>
					<img src="/img/qrcode.png" class="qrcode" />
					<div class="h3">使用支付宝App扫码支付</div>
					<div class="desc">付款前请先试用，虚拟产品一经付款不接受退款。如需开发票请联系客服</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 显示隐藏
				show: false,
				
			}
		},
		methods: {
			
			// 打开弹窗
			open(){
				this.show = true;
			},
			
			// 关闭弹窗
			close(){
				this.show = false;
			},
			
		},
		asyncData({ app }) {
			
		},
	}
</script>

<style lang="scss" scoped>
	.commonPop{
		background: rgba(0,0,0,0.55);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2000;
		visibility: hidden;
		opacity: 0;
		transition: 0.2s all;
		backdrop-filter: blur(10px);
		&.show{
			opacity: 1;
			visibility: visible;
		}
	}
	.commonMain{
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 950px;
		height: 616px;
		max-height: 90vh;
		z-index: 2001;
		overflow: hidden;
		top: -100%;
		border-radius: 10px;
		transition: 0.15s all;
		&.show{
			top: 50%;
		}
		.purchaseAreaTotalBg{
			width: 100%;
			height: 100%;
			display: block;
		}
		.close{
			position: absolute;
			right: 15px;
			top: 15px;
			font-size: 20px;
			color: #a26c49;
			line-height: 30px;
			width: 30px;
			text-align: center;
			cursor: pointer;
			transition: 0.2s all;
			z-index: 3;
			&:hover{
				opacity: 0.8;
			}
		}
		.vipMain{
			z-index: 2;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			flex-direction: row;
			align-items: center;
			.left{
				flex: 1;
				width: 0;
				height: 100%;
				flex-direction: column;
				padding: 22px;
				.userFlex{
					padding: 0 10px;
					height: 50px;
					flex-direction: row;
					align-items: center;
					.avatar{
						width: 50px;
						height: 50px;
						border-radius: 8px;
					}
					.info{
						flex: 1;
						width: 0;
						margin: 0 15px;
						.nick{
							-webkit-text-fill-color: transparent;
							background: linear-gradient(281.06deg, #813803 4.09%, #58290a 117.55%), linear-gradient(270deg, #ff8000 -30.94%, #813803 36.01%, #58290a 118.43%);
							-webkit-background-clip: text;
							color: #58290a;
							font-size: 17px;
							font-weight: bold;
							line-height: 1.2;
						}
						.desc{
							color: #793706;
							font-size: 13px;
							margin-top: 6px;
							line-height: 1.1;
						}
					}
					.btn{
						font-size: 14px;
						color: #974d1c;
						background: #fff9f0;
						line-height: 31px;
						padding: 0 19px;
						font-weight: bold;
						border-radius: 100px;
						transition: 0.2s all;
						cursor: pointer;
						&:hover{
							opacity: 0.8;
						}
					}
				}
				.vipCenter{
					margin-top: 18px;
					flex: 1;
					height: 0;
					flex-direction: column;
					background: url("/img/wxPurchaseHeadBg.png")no-repeat center top;
					background-size: contain;
					background-color: #FFF;
					border-radius: 15px;
					.heads{
						flex-direction: row;
						align-items: center;
						height: 55px;
						justify-content: center;
						height: 55px;
						width: 200px;
						span{
							font-weight: bold;
							font-size: 17px;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							-webkit-background-clip: text;
							background-image: linear-gradient(281.06deg, #813803 4.09%, #58290a 117.55%), linear-gradient(270deg, #ff8000 -30.94%, #813803 36.01%, #58290a 118.43%);
							color: #813803;
						}
						img{
							width: 32px;
							margin-left: 8px;
						}
					}
					.vipScroll{
						padding: 16px 20px 20px 20px;
						overflow-y: auto;
						flex: 1;
						height: 0;
						&::-webkit-scrollbar {
							display: none;
						}
						.packageGroup{
							flex-direction: row;
							flex-wrap: wrap;
							.item{
								margin-right: 12px;
								margin-bottom: 12px;
								padding: 30px 10px 25px 10px;
								background: #fefaee;
								border: 1px solid #f0c992;
								border-radius: 10px;
								width: calc((100% - 12px * 3) / 4);
								flex-direction: column;
								align-items: center;
								justify-content: center;
								transition: 0.2s all;
								cursor: pointer;
								position: relative;
								&:nth-child(4n){
									margin-right: 0;
								}
								&:hover{
									opacity: 0.8;
								}
								.notice{
									background: linear-gradient(270deg, #ff715f, #ff3f43);
									border-radius: 12px 0 12px 0;
									color: #fff;
									font-size: 10px;
									font-weight: 600;
									left: -1px;
									line-height: 12px;
									padding: 4px 8px;
									position: absolute;
									top: -1px;
								}
								.vH3{
									-webkit-text-fill-color: transparent;
									background-clip: text;
									-webkit-background-clip: text;
									background-image: linear-gradient(281.06deg, #813803 4.09%, #58290a 117.55%);
									font-size: 15px;
									line-height: 1.2;
									font-weight: bold;
								}
								.vPrice{
									flex-direction: row;
									align-items: center;
									height: 33px;
									margin-top: 8px;
									.unit{
										font-weight: bold;
										color: #632d09;
										font-size: 13px;
										margin-right: 2px;
										font-family: "微软雅黑";
									}
									.num{
										font-weight: bolder;
										font-size: 28px;
										-webkit-text-fill-color: transparent;
										background-clip: text;
										-webkit-background-clip: text;
										background-image: linear-gradient(270deg, #793505, #5d2b09);
										font-family: "微软雅黑";
									}
								}
								.vOldPrice{
									text-decoration: line-through;
									color: #a6754e;
									margin-top: 8px;
									font-size: 13px;
									font-weight: bold;
									line-height: 1.2;
								}
								&.active{
									border: 1px solid #f0c992;
									background: linear-gradient(288.44deg, #eabc88 -18.63%, #ebbf8d -11.17%, #fadbaf 1.29%, #fff1d4 54.41%, #fffefa 116.17%);
									.vPrice{
										.unit{
											color: #bc431a;
										}
										.num{
											background-image: linear-gradient(309.34deg, #932f0a -2.01%, #dd5327 96.15%), linear-gradient(90deg, #b85b07, #cf8825), linear-gradient(180deg, #ff8000, #ff4800), linear-gradient(270deg, #ff8000 -149.37%, #813803 -29.34%, #58290a 118.43%);
										}
									}
									.vOldPrice{
										color: #c46e2f;
									}
								}
							}
						}
						.vipH3{
							flex-direction: column;
							align-items: center;
							justify-content: center;
							margin-top: 20px;
							.one{
								-webkit-text-fill-color: transparent;
								-webkit-background-clip: text;
								background-image: -webkit-linear-gradient(111deg, #ad5300, #e2941c);
								color: #05073b;
								font-size: 20px;
								font-weight: 500;
								letter-spacing: 0;
								line-height: 26px;
								position: relative;
								&:before{
									content: "";
									background-image: linear-gradient(270deg, #f1bd86, rgba(255, 224, 98, 0));
									height: 1px;
									width: 90px;
									position: absolute;
									top: 50%;
									left: -65%;
									transform: translate(0, -50%);
								}
								&:after{
									content: "";
									background-image: linear-gradient(-270deg, #f1bd86, rgba(255, 224, 98, 0));
									height: 1px;
									width: 90px;
									position: absolute;
									top: 50%;
									right: -65%;
									transform: translate(0, -50%);
								}
							}
							.two{
								color: #793706;
								font-size: 12px;
								line-height: 16px;
								margin: 6px 0 16px;
							}
						}
						.vipTable{
							border: 1px solid hsla(35, 76%, 76%, .5);
							border-radius: 8px;
							overflow: hidden;
							box-shadow: 0 2px 40px 0 rgba(0,0,0,.03);
							.column{
								flex-direction: row;
								align-items: center;
								background: #FFF;
								.item{
									color: #676890;
									padding: 0 18px;
									line-height: 45px;
									font-size: 13px;
									img{
										vertical-align: middle;
										margin-top: -2px;
										margin-left: 6px;
										width: 33px;
									}
									&:nth-child(1){
										width: 35%;
									}
									&:nth-child(2){
										flex: 1;
										width: 0;
										color: #9a4603;
										text-align: center;
										background: linear-gradient(270deg, #fef4e5, #fffbf1);
									}
									&:nth-child(3){
										flex: 1;
										width: 0;
										text-align: center;
									}
								}
								&:nth-child(2n - 1){
									background: #fef9ef;
									.item:nth-child(2){
										background: linear-gradient(288.44deg, hsla(35, 88%, 83%, .7) -18.63%, rgba(255, 241, 212, .7) 54.41%, rgba(255, 247, 230, .7) 116.17%), linear-gradient(136.11deg, #fff 5.26%, #fff 105.78%);
									}
								}
							}
						}
					}
				}
			}
			.right{
				width: 243px;
				height: 100%;
				padding: 0 10px;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				.qrcode{
					border-radius: 10px;
					background: #FFF;
					width: 155px;
					height: 155px;
				}
				.h3{
					text-align: center;
					font-size: 14px;
					line-height: 1.45;
					margin-top: 15px;
					color: #7d643e;
					font-weight: bold;
				}
				.payGroup{
					margin-bottom: 15px;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 80%;
					.item{
						flex-direction: row;
						align-items: center;
						justify-content: center;
						margin-right: 26px;
						transition: 0.2s all;
						cursor: pointer;
						padding-bottom: 10px;
						&:hover{
							opacity: 0.8;
						}
						&:nth-last-child(1){
							margin-right: 0;
						}
						&.active{
							border-bottom: 2px solid #000;
							span{
								font-weight: bold;
								font-size: 15px;
							}
						}
						img{
							width: 20px;
							height: 20px;
							margin-right: 7px;
						}
						span{
							color: #000;
							font-size: 16px;
						}
					}
				}
				.desc{
					font-size: 12px;
					color: #b29a74;
					line-height: 1.55;
					padding: 0 20px;
					position: absolute;
					bottom: 18px;
					left: 0;
					right: 0;
				}
			}
		}
	}
</style>